<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form :model="articleForm">
        <el-form-item label="状态：">
          <el-radio-group v-model="articleForm.resource">
            <el-radio label="全部"></el-radio>
            <el-radio label="草稿"></el-radio>
            <el-radio label="待审核"></el-radio>
            <el-radio label="审核通过"></el-radio>
            <el-radio label="审核失败"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <el-select
            v-model="articleForm.regionId"
            placeholder="请选择文章频道"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in articleForm.region"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            v-model="articleForm.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header">根据筛选条件共查询到 5001 条结果：</div>
      <el-table :data="articleList" style="width: 100%">
        <el-table-column label="封面" width="220">
          <template #default="scoped">
            <div v-if="scoped.row.cover.images.length > 0">
              <img :src="scoped.row.cover.images[0]" alt="" width="200px" />
            </div>
            <div v-else>
              <img src="@/assets/暂无png.png" alt="" width="200px" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180">
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scoped">
            <el-tag type="success">{{ statusText(scoped.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
        <el-table-column prop="read_count" label="阅读数"> </el-table-column>
        <el-table-column prop="comment_count" label="评论数"> </el-table-column>
        <el-table-column prop="like_count" label="点赞数"> </el-table-column>
        <el-table-column label="操作">
          <template #default="scoped">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="edit(scoped.row.id)"
            ></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[5, 10, 20, 30]"
        :page-size="10"
        layout=" prev, pager, next,sizes"
        :total="total_count"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getChannels, getArticles } from '@/api/article'
export default {
  name: 'article-page',
  components: {},
  props: {},
  data () {
    return {
      articleForm: {
        region: [],
        resource: '',
        date: '',
        regionId: ''
      },
      articleList: [],
      page: 1,
      per_page: 10,
      total_count: 0
    }
  },
  watch: {},
  computed: {},
  created () {
    this.getChannels()
    this.getArticles()
  },
  mounted () {},
  methods: {
    // 获取所有频道
    async getChannels () {
      const { data } = await getChannels()
      this.articleForm.region = data.channels
      //   console.log(this.articleForm.region)
    },
    // 获取文章列表
    async getArticles () {
      const { data } = await getArticles()
      this.articleList = data.results
      this.total_count = data.total_count // 4983
    },
    // 判断状态
    statusText (status) {
      if (status === 0) {
        return '草稿'
      } else if (status === 1) {
        return '待审核'
      } else if (status === 2) {
        return '审核通过'
      } else if (status === 3) {
        return '审核失败'
      } else {
        return '全部'
      }
    },
    // 标题图片显示
    statusImg () {}
  }
}
</script>
<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
}
.el-pagination {
    text-align: center;
    margin-top: 10px;
}
</style>
